<script setup>
import { onMounted, ref } from 'vue'
import zh from 'element-plus/es/locale/lang/zh-cn.mjs'

const drawer = ref(true)


</script>

<template>

  <!--  顶部-->
  <div class='db'>
    <a class='log'>
            <span>
              easy-log
            </span>
    </a>
  </div>
  <el-container class='layout-container'>
    <!--      左侧导航-->
    <el-aside v-show='drawer' class='leftNavigation' width='200px'>
      <el-menu
        :default-active='$route.path'
        router
        active-text-color='#ffd04b'
        background-color='#545c64'
        class='el-menu-vertical-demo'
        default-active='2'
        text-color='#fff'
      >
        <el-menu-item index='/index'>
          <el-icon>
            <SuccessFilled />
          </el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item index='/viewLog'>
          <el-icon>
            <Delete />
          </el-icon>
          <span>查看日志</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!--      实际数据-->
    <el-main>
      <div class='maintop'>
        <div v-show='drawer' @click='drawer=false'>
          <el-icon>
            <ArrowDownBold />
          </el-icon>
        </div>
        <div v-show='!drawer' @click='drawer=true'>
          <el-icon>
            <ArrowRightBold />
          </el-icon>
        </div>
      </div>
      <!-- 国际化处理 -->
      <el-config-provider :locale="zh">
        <router-view />
      </el-config-provider>
    </el-main>
  </el-container>

</template>

<style scoped>
.db {
  .log {
    padding-left: 20px;
    color: #059887;
    line-height: 80px;
    font-size: 50px;
    font-weight: 700;
  }

  width: 100%;
  height: 80px;
  background-color: #252a2f;
}

.layout-container {
  height: 100vh;

  .el-aside {
    background-color: #232323;

    .el-menu {
      border-right: none;
    }
  }

  .el-header {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      .el-icon {
        color: #999;
        margin-left: 10px;
      }

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }
}

</style>

